<template>
	<view class="paidDetail">
		<nav-bars backState="1000" :bgColor="navBackground" fontColor="#fff" title="订单详情"></nav-bars>
		<view class="topImg">
			<image :src="`${baseImg}/static/adminShop/detailBack.png`" mode=""></image>
			<!-- time -->
			<view class="time">
				<view class="title">
					<image :src="`${baseImg}/static/adminShop/detailWait.png`" mode=""></image>
					{{status[orderdetail.order_status]}}
				</view>
				<view class="onlyTime" v-if="orderdetail.order_status == 1">还剩 <countdown :startTime="startTime" :endTime="enTime" style="display: inline-block;" />自动关闭订单</view>
			</view>
			<!-- 用户信息 -->
			<view class="userInfo">
				<view class="infoItem">
					<view class="left">
						<image :src="`${baseImg}/static/adminShop/detailAddress.png`" mode=""></image>
						<view class="call">
							<view class="info">
								{{orderdetail.name}} {{orderdetail.mobile}}
							</view>
							<view class="address">
								{{orderdetail.province}}{{orderdetail.city}}{{orderdetail.area}}{{orderdetail.address}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" :style="'margin-top:'+navHeight+'rpx;'">
			<!-- 商品清单 -->
			<view class="shopList">
			  <view v-for="(item,index) in orderdetail.list" :key="index">
					<h3>{{item.cate_name}}</h3>
					<view class="list" v-for="(items,index) in item.product_list" :key="index">
						<view class="item">
							<image :src="items.main_imgurl" mode=""></image>
							<view class="shopInfo">
								<view class="top">
									<view class="tit omit-2">
										{{items.product_title}}
									</view>
									¥ {{items.price}}
								</view>
								<view class="spec">
									<view v-for="(attr_params,index) in items.attr_params" style="display: inline-block;">
										<text v-if="attr_params.attr_name">{{attr_params.attr_value}}</text>
										<text v-if="attr_params.key">{{attr_params.value}}</text>
									</view>
									<span>x{{items.num}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>	
				<!-- 价钱 -->
				<view class="price">
					<view class="all">
						总价<span>¥ {{orderdetail.price}}</span>
					</view>
					<view class="all">
						运费<span>¥ 0.00</span>
					</view>
					<view class="need" v-if="orderdetail.is_many_way == 1 && orderdetail.deposit_status == 0">
						待付定金<span>¥ {{orderdetail.deposit_price}}</span>
					</view>
					<view class="need" v-if="orderdetail.is_many_way == 1 &&orderdetail.balance_status == 0">
						待付尾款<span>¥ {{orderdetail.balance_price}}</span>
					</view>
				</view>
			</view>
			
			<!-- 订单信息 -->
			<view class="orderInfo">
				<h3>订单信息</h3>
				<view class="top">
					<view class="item">
						订单编号<view class="txt">{{orderdetail.order_code}}<span @click="copy(orderdetail.order_code)">复制</span></view>
					</view>
					<view class="item">
						支付状态<view class="txt">{{status[orderdetail.order_status]}}</view>
					</view>
					<view class="item">
						配送方式<view class="txt" v-if="orderdetail.move_way == 1">快递</view><view class="txt" v-else>自提</view>
					</view>
				</view>
				<view class="bottom">
					下单时间<span>{{orderdetail.create_time | formatDates}}</span>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<!-- <view class="btn">
			<view class="btn_item">联系买家</view>
			<view class="btn_item" v-for="(bItem,bntIndex) in bnt" @click="bntitem(bItem.bind,index,orderdetail,orderdetail.order_code)" :class="bItem.class" v-if="orderdetail.order_status==bItem.status" :key="bntIndex">{{bItem.title}}</view>
		</view> -->
		<view class="btn" v-if="orderdetail.order_status == 1">
			<!-- #ifndef MP-WEIXIN -->
			<view class="btn_item" @click="gitchat()">联系商家</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="btn_item" @click="gitchat()" v-if="!config_id && !config_url">联系商家</view>
			<view class="btn_item" v-else @click="gitpouchatshow">联系商家</view>
			<!-- #endif -->
			<view class="btn_item" @click="cancelOrder(orderdetail.order_code)">取消订单</view>
			<view class="btn_item" @click="payModel(orderdetail,orderdetail.order_code)">立即付款</view>
		</view>
		<view class="btn" v-if="orderdetail.order_status == 2">
			<!-- #ifndef MP-WEIXIN -->
			<view class="btn_item" @click="gitchat()">联系商家</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="btn_item" @click="gitchat()" v-if="!config_id && !config_url">联系商家</view>
			<view class="btn_item" v-else @click="gitpouchatshow">联系商家</view>
			<!-- #endif -->
			<view class="btn_item" v-if="orderdetail.is_many_way == 1 &&item.balance_status == 0" @click="payModel(orderdetail,orderdetail.order_code)">付尾款</view>
		</view>
		<view class="btn" v-if="orderdetail.order_status == 3">
			<!-- #ifndef MP-WEIXIN -->
			<view class="btn_item" @click="gitchat()">联系商家</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="btn_item" @click="gitchat()" v-if="!config_id && !config_url">联系商家</view>
			<view class="btn_item" v-else @click="gitpouchatshow">联系商家</view>
			<!-- #endif -->
			<view class="btn_item" v-if="orderdetail.arrive_status == 0" @click="confirms(orderdetail,orderdetail.order_code)">确认收货</view>
			<view class="btn_item" v-if="orderdetail.is_many_way == 1 &&item.balance_status == 0" @click="payModel(orderdetail,orderdetail.order_code)">付尾款</view>
		</view>
		<view class="btn" v-if="orderdetail.order_status == 4">
			<!-- #ifndef MP-WEIXIN -->
			<view class="btn_item" @click="gitchat()">联系商家</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="btn_item" @click="gitchat()" v-if="!config_id && !config_url">联系商家</view>
			<view class="btn_item" v-else @click="gitpouchatshow">联系商家</view>
			<!-- #endif -->
			<view class="btn_item" @click="deleteOrder(orderdetail.order_code)">删除订单</view>
		</view>
		<view class="btn" v-if="orderdetail.order_status == 5">
			<!-- #ifndef MP-WEIXIN -->
			<view class="btn_item" @click="gitchat()">联系商家</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="btn_item" @click="gitchat()" v-if="!config_id && !config_url">联系商家</view>
			<view class="btn_item" v-else @click="gitpouchatshow">联系商家</view>
			<!-- #endif -->
			<view class="btn_item" @click="deleteOrder(orderdetail.order_code)">删除订单</view>
		</view>
		
		
		<!-- 二维码 -->
		<view class="qrcodepop" :style="showModal?'':'display:none;'">
			<view class="qrcodecont">
				<view class="qrname">
					<view>核销二维码</view>
					<view><canvas  canvas-id="myQrcode"></canvas></view>
				</view>
				<view class="iconfont icon-close" @click="handleHideCodeClick"></view>
			</view>
		</view>
		<!-- 微信客服 -->
		<view class="pouchat" v-if="pouchatshow">
		  <view class="poucont">	
			<view class="chatlist">
				<view class="chatml" @click="gitwxchat()" v-if="config_url">
					<image src="https://manager.ryz1620.com/static/my/wxchat.png" mode="widthFix"></image>
					<text class="t1">在线微信客服</text>
					<text class="t2">可直接联系客服</text>
				</view>
				<view class="chatml" v-if="config_id">
					<cell class="cell-service" bind:startmessage='startmessage' bind:completemessage="completemessage" :plugid="config_id"/>
					<image src="https://manager.ryz1620.com/static/my/codechat.png" mode="widthFix"></image>
					<text class="t1">添加微信客服</text>
					<text class="t2">扫微信二维码</text>
				</view>
			</view>
			<view class="iconfont icon-close" @click="wxCodeClick"></view>
		  </view>	
		</view>
	</view>
</template>

<script>
	import countdown from "@/components/cz-countdown/cz-countdown.vue"
	import service_product from '@/service/product.js'
	import service_mall from '@/service/mall.js'
	const qrCode = require('@/utils/weapp-qrcode.js')
	export default{
		components: {
			countdown,
			// #ifdef MP-WEIXIN
				"cell": "plugin://contactPlugin/cell",
			// #endif
		},
		data(){
			return{
				navBackground:'',
				baseImg:'http://manager.ryz1620.com',
				navHeight:200,
				startTime:'',
				enTime:'',
				status: {
					1: "待付定金",
					2: "待发货",
					3: "待收货",
					4: "已完成",
					5: "已关闭"
				},
				orderdetail:'',
				code:'',
				showModal: false,
				tapIndex:'',
				terminal:"",
				config_id:'',
				config_url:'',
				pouchatshow:false,
			}
		},
		filters: {
			formatDates(value) {
				  let date = new Date(parseInt(value) * 1000);
				  let y = date.getFullYear();
				  let m = date.getMonth() + 1;
				  m = m < 10 ? "0" + m : m;
				  let d = date.getDate();
				  d = d < 10 ? "0" + d : d;
				  let h = date.getHours();
				  h = h < 10 ? "0" + h : h;
				  let minute = date.getMinutes();
				  let second = date.getSeconds();
				  minute = minute < 10 ? "0" + minute : minute;
				  second = second < 10 ? "0" + second : second;
				  return y +"-" + m + "-" + d + " " + h + ":" + minute + ":"+second;
			},
				formatDate(value) {
					var date = new Date(value);
					//date.setTime(value);
					var month = date.getMonth() + 1;
					var hours = date.getHours();
					if (hours < 10)
						hours = "0" + hours;
					var minutes = date.getMinutes();
					if (minutes < 10)
						minutes = "0" + minutes;
					var time = date.getFullYear() + "/" + month + "/" + date.getDate() +
						" " + hours + ":" + minutes;
					return time;
					}
		},
		onLoad(options) {
			this.$utils.getUrl()
			this.navHeight = 468 - (Number(this.$store.state.system.navBarHeight)*2)
			this.order_code = options.orderid
			this.getdata()
			this.gitConfig()
			this.gitwxConfig()
			//#ifdef MP-WEIXIN
				this.terminal = "wxapplet";
			//#endif
		},
		methods:{
			copy(value){
			  //提示模板
			  uni.showModal({
			    content:value,//模板中提示的内容
			    confirmText:'复制订单编号',
			    success:()=>{//点击复制内容的后调函数
			      //uni.setClipboardData方法就是讲内容复制到粘贴板
			      uni.setClipboardData({
			        data:value,//要被复制的内容
			        success:()=>{//复制成功的回调函数
			          uni.showToast({//提示
			            title:'复制成功'
			          })
			        }
			      });
			    }
			  });
			},
			// 获取企业微信callme配置
			gitConfig() {
				service_mall.getCallMeConfig({ partner_type: 'root', partner_id: 1 }).then(res => {
					if (res.code == 1) {
						this.config_id = res.data.config_id;
					}
				});
			},
			gitwxConfig() {
				service_mall.getwxMeConfig({ partner_type: 'root', partner_id: 1  }).then(res => {
					if (res.code == 1) {
						this.config_url = res.data.url;
					}
				});
			},
			gitpouchatshow(){
				this.pouchatshow = true
			},
			wxCodeClick(){
				this.pouchatshow = false
			},
			gitwxchat(){
				wx.openCustomerServiceChat({
				  extInfo: {url: this.config_url},
				  corpId: this.$env.CORPID,
				  success(res) {}
				})
			},
			// 客服
			gitchat(){
				uni.showToast({
					title: '哎呀!不好意思，暂未配置客服...',
					icon: 'none',
					duration: 2000
				});
				// uni.navigateTo({
				// 	url:"/pages_customer/pages/index?partner_type=root&partner_id=0"
				// })
			},
			// 订单详情
			getdata() {
				uni.showLoading()
				service_product.getPackDetails({
					 order_code:this.order_code
				})
					.then(res => {
						uni.hideLoading()
						if(res.code == 1){
							let endata = res.data.create_time + 86340
							 this.startTime= this.$options.filters.formatDate(new Date())
							 this.enTime= this.$options.filters.formatDates(endata)
							 this.orderdetail = res.data
						}
					})
					.catch(err => {
						uni.hideLoading()
					})
			},
			// 确认收货
			confirms(item,id){
				uni.navigateTo({
					url:"/pages_product/pages/product/order/confirmorder?orderid=" + id
				})		
			},
			// 选择支付方式
			payModel(item,id){
				    let itemList = [ "微信支付", "线下支付"]
					this.itemList = itemList
			        uni.showActionSheet({
			            itemList: this.itemList,
			            success: (t) => {
							this.tapIndex = t.tapIndex+1
					       this.getpayorder(item.order_code)	
						}
			        });
			 },
			 initQrCode:function(){
			 	new qrCode('myQrcode', {
			 		text: this.code,
			 		width: 160,
			 		height: 160,
			 		colorDark: "#333333",
			 		colorLight: "#FFFFFF",
			 		correctLevel: qrCode.CorrectLevel.H
			 	})
			 },
			 handleShowCodeClick:function(){
			 	this.showModal = true
			 	this.$nextTick(function(){
			 		this.initQrCode()
			 	})
			 },
			 handleHideCodeClick:function(){
			 	this.showModal = false
			 },
			 getpayorder(order_codes){
			 	service_mall.getpay({
			 		order_no:order_codes,
			 		type:'pack_order',
			 		pay_type:this.tapIndex
			 		}).then(res=>{
			 		if(res.code == 1){
			 			let data = res.data
			 			if(this.tapIndex==1){
			 				if(this.terminal == 'wxapplet'){
			 					uni.requestPayment({
			 						appId:res.data.appId,
			 						nonceStr: res.data.nonceStr,
			 						package: res.data.package,
			 						paySign: res.data.paySign,
			 						signType: res.data.signType,
			 						timeStamp: res.data.timeStamp,
			 						success: (suc) => {
			 							uni.navigateTo({
			 								url: "/pages_product/pages/product/order/sucess?type=1" + '&order_no=' + order_codes
			 							})
			 						},
			 						fail: (err) => {
			 							uni.navigateTo({
			 								url: "/pages_product/pages/product/order/sucess?type=0" + '&order_no=' + order_codes
			 							})
			 						}
			 					});
			 				}else{
			 					uni.requestPayment({
			 						provider: 'wxpay',
			 						orderInfo: {
			 							"appid":res.data.appid,
			 							"partnerid": res.data.partnerid,
			 							"prepayid": res.data.prepayid,
			 							"noncestr": res.data.noncestr,
			 							"package": res.data.package,
			 							"timestamp": res.data.timestamp,
			 							"sign": res.data.sign,
			 						},
			 						success: (suc) => {
			 							uni.navigateTo({
			 								url: "/pages_product/pages/product/order/sucess?type=1" + '&order_no=' + order_codes
			 							})
			 						},
			 						fail: (err) => {
			 							uni.navigateTo({
			 								url: "/pages_product/pages/product/order/sucess?type=0" + '&order_no=' + order_codes
			 							})
			 						}
			 					});
			 				}
			 		   }else{
			 			   this.code = res.data.verificationCode
			 			   this.handleShowCodeClick()
			 		   }	
			 			
			 		}else{
			 			this.$utils.hideLoading();
			 			uni.showToast({
			 			title: res.msg,
			 			icon:'none',
			 			duration: 2000
			 			});
			 			
			 		}	
			 	})
			 },
			// 删除订单
			deleteOrder(id) {
				let that = this
				uni.showModal({
					title: "提示！",
					content: "是否删除该订单",
					success: function(i) {
						if (i.confirm) {
							uni.showLoading('正在删除...')
							service_product.packOrdercancel({
								 order_code:id,
							}).then(res => {
								uni.hideLoading();
								if (res.code == 1) {
									uni.showToast({title: "删除成功！", icon: "none"});
									uni.navigateTo({
										url: '/pages_product/pages/product/order/list',
									});
								}else{
									uni.showToast({title: "删除失败！", icon: "none"});
								}
							});
						}
					}
				});
			},
			// 取消订单
			cancelOrder(id) {
				let that = this
				uni.showModal({
					title: "提示！",
					content: "是否取消该订单",
					success: function(i) {
						if (i.confirm) {
							uni.showLoading('正在取消...')
							service_product.packOrdercancel({
								order_code:id,
							}).then(res => {
								uni.hideLoading();
								if (res.code == 1) {
									that.list = []
									that.page =1
									uni.showToast({title: "取消成功！", icon: "none"});
									that.getdata() ;
								}else{
									uni.showToast({title: "取消失败！", icon: "none"});
								}
							});
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.icon-more{display: inline-block;}
	.paidDetail{
		width: 100%;
		.topImg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 468rpx;
			image{
				width: 100%;
				height: 100%;
			}
			.time{
				padding: 0 44rpx;
				position: absolute;
				bottom: 146rpx;
				left: 0;
				color: #fff;
				.title{
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;
					image{margin-right: 16rpx;width: 40rpx;height: 40rpx;border-radius: 50%;}
					font: 500 36rpx/36rpx PingFang SC;
				}
				.onlyTime{font: 400 26rpx/36rpx PingFang SC;margin-top: 25rpx;}
			}
			// 用户信息
			.userInfo{
				width: 100%;
				position: absolute;
				left: 0;
				bottom: -102rpx;
				.infoItem{
					padding: 28rpx 24rpx;
					display: flex;
					justify-content: space-between;
					margin: 0 auto;
					width: 702rpx;
					height: 188rpx;
					background-color: #fff;
					border-radius: 16rpx;
					image{width: 40rpx;height: 40rpx;}
					.left{
						display: flex;
						.call{
							margin:0 20rpx 0 24rpx;
							display: flex;
							flex-direction: column;
							.info{
								margin-bottom: 20rpx;
								display: flex;
								color: #0A0605;
								font: 500 26rpx/40rpx PingFang SC;
								span{
									margin-left: 16rpx;
									padding: 0rpx 12rpx;
									border-radius: 18rpx;
									background-color: #F5F6F6;
									font: 400 18rpx/40rpx PingFang SC;
								}
							}
							.address{
								color: #505050;
								font: 400 26rpx/40rpx PingFang SC;
							}
						}
					}
				}
			}
		}
		
		// 内容
		.content{
			padding: 126rpx 24rpx 0;
			margin-bottom: 116rpx;
			padding-bottom:120rpx;
			// 商品清单
			.shopList{
				background-color: #fff;
				padding: 28rpx;
				border-radius: 16rpx;
				h3{
					padding-bottom: 28rpx;
					font: 500 30rpx/40rpx PingFang SC;
					color: #0A0605;
				}
				.list{
					.item{
						display: flex;
						margin-bottom: 32rpx;
						image{
							width: 148rpx;
							height: 148rpx;
							border-radius: 8RPX;
						}
						.shopInfo{
							width: 478rpx;
							margin-left: 24rpx;
							display: flex;
							flex-direction: column;
							.top{
								color: #505050;
								font: 400 26rpx/40rpx PingFang SC;
								.tit{
									width: 328rpx;
								}
								display: flex;
								justify-content: space-between;
							}
							.spec{
								display: flex;
								justify-content: space-between;
								margin-top: 40rpx;
								color: #A0A0A0;
								font: 400 22rpx/22rpx PingFang SC;
							}
						}
					}
				}
				// 价钱
				.price{
					padding-top: 32rpx;
					border-top: 2rpx solid #F5F5F5;
					view{
						display: flex;
						justify-content: space-between;
					}
					.all{
						padding: 10rpx 0;
						font: 400 26rpx/40rpx PingFang SC;
						color: #505050;
					}
					.need{
						padding: 10rpx 0;
						font: 500 26rpx/40rpx PingFang SC;
						color: #0A0605;
						span{
							color: #DBA954;
						}
					}
				}
			}
			// 订单信息
			.orderInfo{
				margin-top: 24rpx;
				background-color: #fff;
				padding: 28rpx;
				border-radius: 16rpx;
				h3{
					font: 500 30rpx/40rpx PingFang SC;
					color: #0A0605;
				}
				.top{
					padding: 28rpx 0 0;
					margin-bottom: 24rpx;
					border-bottom: 2rpx solid #f5f5f5;
					.item{
						font: 400 26rpx/40rpx PingFang SC;
						color: #A0A0A0;
						display: flex;
						margin-bottom: 24rpx;
						align-items: center;
						.txt{
							display: flex;
							color: #505050;
							margin-left: 32rpx;
							span{
								margin-left: 18rpx;
								padding: 0 14rpx;
								border-radius: 18rpx;
								color: #DBA954;
								font: 400 18rpx/40rpx PingFang SC;
								background-color: rgba(219,169,84,0.1);
							}
						}
					}
				}
				.bottom{
					font: 400 26rpx/40rpx PingFang SC;
					color: #A0A0A0;
					display: flex;
					align-items: center;
					span{
						margin-left: 32rpx;
						color: #505050;
					}
				}
			}
		}
		
		// 按钮
		.btn{
			width: 100%;
			height: 92rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: flex-end;
			padding: 0 24rpx;
			height: calc(92rpx+ constant(safe-area-inset-bottom));			height: calc(92rpx + env(safe-area-inset-bottom));			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			.btn_item{
				width: 154rpx;
				height: 56rpx;
				border-radius: 28rpx;
				border: 2rpx solid #505050;
				font: 400 24rpx/56rpx PingFang SC;
				color: #505050;
				text-align: center;
				margin:18rpx 0 18rpx 20rpx;
				position: relative;
				.cell-service{
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
					top: 0;
					opacity: 0;
					z-index: 10;
					.cell--bubble{
						width: 100%;
					}
				}
			}
		}
	}
.qrcodepop{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	z-index: 9999;
	.qrcodecont{
		width: 400rpx;
		position: absolute;
		left: 50%;
		top: 25%;
		margin-left: -200rpx;
		.qrname{
			background: #fff;
			line-height: 80rpx;
			height: 440rpx;
			overflow: hidden;
			padding: 20rpx;
			text-align: center;
			border-radius: 15rpx;
			canvas{
				width: 300rpx;
				height: 300rpx;
				margin: auto;
			}
		}
		.icon-close{
			display: block;
			font-size: 60rpx;
			color: #fff;
			text-align: center;
			margin: 30rpx auto;
		}
	}
}
	// 客服弹框
		.pouchat{
			position: fixed;
			background: rgba(0,0,0,0.5);
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
			.poucont{
				position: absolute;
				top:30%;
				left: 15%;
				right: 15%;
				.icon-close{
					width: 80rpx;
					height: 80rpx;
					font-size: 70rpx;
					color: #fff;
					line-height: 80rpx;
					text-align: center;
					margin: 30rpx auto;
				}
			}
			.chatlist{
				background: #fff;
				padding:30rpx;
				border-radius: 10rpx;
			}
			.chatml{
				position: relative;
				padding: 20rpx;
				padding-left: 100rpx;
				min-height: 100rpx;
				.cell-service{
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
					top: 0;
					opacity: 0;
					z-index: 10;
					.cell--bubble{
						width: 100%;
					}
				}
				text{
					display: block;
					line-height: 40rpx;
				}
				.t1{
					font-size: 32rpx;
				}
				.t2{
					font-size: 24rpx;
					color: #999;
				}
				image{
					width: 70rpx;
					height: 70rpx;
					position: absolute;
					left: 15rpx;
					top:25rpx;
				}
			}
		}
</style>
